<template>
  <div id="xgPlayerId" class="xg-player"></div>
</template>

<script>
export default {
  name: "xgPlayer",
  props: {
    url: String,
  },
  data() {
    return {
      /*视频url*/
      videoUrl: null,
      basVideoUrl: import.meta.env.VITE_APP_BASE_VIDEO,
      player: null,
      /*播放器配置项*/
      config: {
        id: "xgPlayerId",
        url: this.videoUrl,
        fluid: true,
        videoInit: true,
        download: true, //设置download控件显示
        rotate: {
          //视频旋转按钮配置项
          innerRotate: true, //只旋转内部video
          clockwise: false, // 旋转方向是否为顺时针
        },
        playbackRate: [0.5, 1, 1.5, 2], // 倍速
        /*width:500,*/
      },
    };
  },
  watch: {
    url: {
      handler(newVal, oldVal) {
        this.changeUrl(newVal);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.player = new Player(this.config);
    },
    // 切换视频源
    changeUrl(url) {
      if (url && url.indexOf("http") == -1) {
        this.videoUrl = this.basVideoUrl + url;
      } else {
        this.videoUrl = url;
      }
      //切换视频源
      this.$nextTick(() => {
        if (url && this.player) {
          this.player.start(this.videoUrl);
        }
      });
    },
  },
  // 销毁组件前，解绑事件
  beforeDestroy() {
    this.player.destroy();
  },
  // 销毁组件后，清空player实例
  destroyed() {
    this.player = null;
  },
};
</script>

<style scoped>
</style>
